<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>网盘上传</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/static/favicon.png" type="image/png" />

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <!-- Semantic UI CDN -->
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css"
        />
        <!-- Toastify.js for toast notifications -->
        <link
            rel="stylesheet"
            type="text/css"
            href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
        />
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
        <style>
            body {
                padding: 2rem;
            }
            .dropzone {
                border: 2px dashed #aaa;
                border-radius: 8px;
                padding: 2rem;
                text-align: center;
                color: #888;
                transition: border-color 0.2s, background 0.2s;
            }
            .dropzone.dragover {
                border-color: #2185d0;
                background: #f0f8ff;
                color: #2185d0;
            }
            .file-list {
                max-height: 220px;
                overflow: auto;
            }
            .mono {
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                    'Liberation Mono', monospace;
            }
        </style>
    </head>
    <body>
        <div class="ui container">
            <h2 class="ui header">网盘上传</h2>
            <a
                class="ui orange button"
                href="https://gitcode.com/SilverLi0x10/gd"
                target="_blank"
                rel="noopener noreferrer"
            >
                YOUR FILES: git???.com/???/gd
            </a>

            <div class="ui segment">
                <div id="dropzone" class="dropzone">将文件或文件夹拖拽到这里</div>
                <div class="ui divider"></div>
                <div class="ui buttons">
                    <label for="file-input" class="ui primary button"> 选择文件 </label>
                    <input id="file-input" type="file" multiple style="display: none" />
                    <div class="or" data-text="或"></div>
                    <label for="dir-input" class="ui button"> 选择文件夹 </label>
                    <!-- 注意：directory 上传依赖 webkitdirectory 属性，Chrome/Edge 支持；Firefox 需要 mozdirectory -->
                    <input
                        id="dir-input"
                        type="file"
                        webkitdirectory
                        directory
                        mozdirectory
                        style="display: none"
                    />
                </div>

                <div class="ui segment">
                    <div class="ui small header">待上传列表</div>
                    <div id="preview" class="ui relaxed divided list file-list"></div>
                    <button id="upload-btn" class="ui green button">开始上传并提交</button>
                    <div
                        id="progress"
                        class="ui tiny indicating progress"
                        data-percent="0"
                        style="margin-top: 1rem"
                    >
                        <div class="bar"></div>
                        <div class="label">上传进度</div>
                    </div>
                    <div id="result" class="ui message" style="display: none"></div>
                </div>
            </div>

            <div class="ui segment">
                <div class="ui small header">当前 resources 内容</div>
                <div class="ui list mono">
                    {% if items and items|length > 0 %} {% for kind, rel in items %}
                    <div class="item" style="display: flex; align-items: center">
                        <i
                            class="{{ 'folder icon' if kind=='dir' else 'file outline icon' }}"
                            style="margin-right: 0.5em"
                        ></i>
                        <span class="mono" style="flex: 1; word-break: break-all">{{ rel }}</span>
                        <button
                            class="ui mini pink button resource-download-btn"
                            data-rel="{{ rel }}"
                            style="margin-left: 1em; vertical-align: middle"
                        >
                            下载
                        </button>
                        <button
                            class="ui mini red button resource-delete-btn"
                            data-rel="{{ rel }}"
                            style="margin-left: 0.5em; vertical-align: middle"
                        >
                            删除
                        </button>
                    </div>
                    {% endfor %} {% else %}
                    <div class="item">暂无文件</div>
                    {% endif %}
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.js"></script>
        <script src="/static/main.js"></script>
    </body>
</html>
